<template>
  <div class="container">
    <Header/>
  <hr style="margin-top: 0;">
  <h1>{{event.title}}</h1>
  <p>搜索指数: {{event.searchIndex}}</p>
  <p>创建时间: {{event.createTime}}</p>
  <p>{{event.content}}</p>

  <div class="comments">
    <h2>评论列表</h2>

    <div class="comment" v-for="item in pageinfo.list">
      <p>{{item.content}}</p>
      <p>
        <span>{{item.user?item.user.nickname:'匿名'}}</span>
        {{item.createTime}}
      </p>
    </div>
    <div class="pagination">
      <a href="javascript:void(0)" @click="changePage(1)">首页</a>
      <a href="javascript:void(0)" @click="changePage(commentQuery.pageNum-1)">&laquo; 上一页</a>
      <a href="javascript:void(0)"
         :class="{paginationok:pageNum==commentQuery.pageNum}"
         v-for="pageNum in pageinfo.navigatepageNums"
         @click="changePage(pageNum)">
        {{pageNum}}
      </a>
      <a href="javascript:void(0)" @click="changePage(commentQuery.pageNum+1)">下一页 &raquo;</a>
      <a href="javascript:void(0)" @click="changePage(pageinfo.pages)">末页</a>
      <span>第 {{commentQuery.pageNum}} 页，共 {{pageinfo.pages}} 页</span>
    </div>
  </div>

  <form action="addcommnet" method="post" id="commentForm">
    <h2>添加评论</h2>
    <textarea name="content" required="" v-model="commentAdd.content"></textarea>
    <input type="button" value="提交" @click="addcomment" >
  </form>
  </div>
</template>

<script>
import axios from 'axios'
import Header from '../components/Header.vue'
import utils from '@/utils/utils.js';

export default {
  name: "Detail",
  components: {Header},
  data(){
    return{
      event:{
        id:0
      },
      components:{
        Header
      },
      pageinfo:{},
      commentAdd:{
        content: "",
        eventId: 0,
      },
      commentQuery:{
        pageNum:1,
        pageSize:3,
      }
    }
  },
  methods:{
    loadevent(){
      axios.get(`/event/one/${this.event.id}`).then(res => {
        this.event = res.data.data
        this.commentAdd.eventId = this.event.id
      })
    },
    loadcomments(){
      axios.get(`/comment/list/?eventId=${this.event.id}&pageNum=${this.commentQuery.pageNum}&pageSize=${this.commentQuery.pageSize}`).then(res => {
        this.pageinfo = res.data.data
      })
    },
    changePage(page){
      if(page>=1 && page<=this.pageinfo.pages) {
        this.commentQuery.pageNum = page
        this.loadcomments(this.event.id)
      }
    },
    addcomment(){
      if(utils.isEmpty(this.loginUser)){
        alert('请登录后发帖')
        return
      }
      axios.post('/comment/add',this.commentAdd).then(res => {
        if(res.data.success) {
          alert('评论成功');
          this.loadcomments(this.event.id)
          this.commentAdd.content = ""
        }else{
          alert('评论失败,'+res.data.message)
        }
      }).catch(reason => {
        console.log(reason.response)
        if(reason.response.status == 401){
          alert("401 token失效")
        }

      })
    },
  },
  created(){
    let id = this.$route.params.eventId
    this.event.id = id
    let commentId = this.$route.query.commentId
    if(commentId) {
      axios.get("/comment/inpage",{params:{
          eventId:this.event.id,
          commentId:commentId,
          pageSize:this.commentQuery.pageSize
        }
      }).then(res => {
        //获取评论的所在页
        this.commentQuery.pageNum = res.data.data
        this.loadcomments()
      })
    }else{
      this.loadcomments()
    }
    this.loadevent()

  },
  // 在组件中定义计算属性
  computed: {
    loginUser() {
      return this.$store.state.user;
    }
  }
}
</script>

<style scoped>

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.container h1 {
  color: hotpink;
}
.comments {
  margin-top: 20px;
}
.comments .comment {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #f9f9f9;
}


.comments .comment p {
  margin-bottom: 0; /* 让评论内容和时间更紧凑 */
}
.comments .comment p:last-child {
  margin-top: 8px; /* 在评论内容和时间之间添加一些间距 */
  color: #999;
  font-size: 0.8em;
}

form {
  margin-top: 20px;
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 5px;
}
textarea {
  width: 100%;
  min-height: 60px;
  resize: vertical;
}
button {
  background-color: #007BFF;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
button:hover {
  background-color: #0056b3;
}

.fixed-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.fixed-button:hover {
  background-color: #0056b3;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.pagination a {
  margin: 0 5px;
  text-decoration: none;
  color: hotpink;
}
.pagination span {
  margin: 0 5px;
}

/* 被点击时的样式 */
.paginationok {
  color: #ff0000 !important; /* 设置点击后的链接文字颜色 */
  text-decoration: underline !important; /* 添加下划线 */
}
</style>